/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { Pie } from '@ant-design/plots';
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, toLocaleString, formatSize, formatterSize, toFixed } from "@utils/format";
import { formatArr } from "@utils/format-show-type";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import api from "@services/";
import DCard from "@/components/DCard";
import * as antdHelper from "@utils/antd-helper";
const Main = ({ className, accountInfo }) => {
	if (!accountInfo) {
		return '';
	}
	const [loading, setLoading] = useState(false);
	const [storageMiningRevenue, setStorageMiningRevenue] = useState([]);
	const initStorageMiningRevenue = async (d) => {
		let data = [
			{
				title: 'Signature Accounts',
				n: d.signature_acc_num,
				showType: 'link',
				tpl: '/account/signaturer/' + accountInfo.accountId
			},
			{
				title: 'Total Staking',
				n: d.total_staking,
				showType: 'balance-logo2'
			},
			{
				title: 'Total Available Reward',
				n: d.total_reward,
				showType: 'balance-logo2'
			},
			{
				title: 'Total Released Reward',
				n: d.total_released_reward,
				showType: 'balance-logo2'
			},
			{
				title: 'Total Space',
				n: d.total_staking_space,
				showType: 'store-size-str'
			},
			{
				title: 'Power',
				n: d.total_power,
				showType: 'power'
			},
			{
				title: 'Total Used Space',
				n: d.total_service_space,
				showType: 'store-size-str'
			},
			{
				title: 'Total Idle Space',
				n: d.total_idle_space,
				showType: 'store-size-str'
			}
		];
		formatArr(data);
		data.forEach(t => {
			if (t.render) {
				t.value = t.render(t.n, t);
			}
		});
		setStorageMiningRevenue(data);
	}

	useEffect(() => {
		initStorageMiningRevenue(accountInfo.Revenue);
	}, [accountInfo]);


	return (
		<div className={className}>
			<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/space.png"} />} title="Storage Mining Revenue">
				<div className="box-con">
					{
						storageMiningRevenue.map(t => {
							return (<div className="box" key={t.title}>
								<div className="div">
									<span className="span">{t.title}</span>
									<label className="label" style={{lineHeight:"28px",height:28}}>{t.value}</label>
								</div>
							</div>);
						})
					}
				</div>
			</DCard>
		</div>
	);
};

export default React.memo(styled(Main)`
    display: block;	
`);
